<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
    <a id="test" href="#">I'm the child--click me!</a>
    <div id="from-parent"></div>

    <script src="../../src/pym.js" type="text/javascript"></script>
    <script>
        var pymChild = new pym.Child();

        function onClick(e) {
            e.preventDefault();
            pymChild.sendMessage('child-click', 'Child clicked!');
        }

        pymChild.onMessage('parent-click', function(data) {
            document.getElementById('from-parent').innerHTML = data;
            pymChild.sendHeight();
        });

        document.getElementById('test').addEventListener('click', onClick);

    </script>
</body>
</html>
